<template>
  <div class="button" :class="`${type}_btn`" @click="handleClick">{{ props.text }}</div>
</template>

<script setup lang="ts">

import { defineProps, defineEmits } from 'vue';
const props = defineProps({
  text: {
    type: String,
    required: true,
    default: ""
  },
  type: {
    type: String,
    required: true,
    default: "orange"
  }
});
const emit = defineEmits<{
  (e: 'handleClick'): void;
}>();

const handleClick = () => {
  emit('handleClick')
}
</script>

<style lang="scss" scoped>
.button {
  text-align: center;
}
.orange_btn {
  color: #1A1921;
  font-weight: 600;
  background: linear-gradient( 180deg, #FFEFE8 0%, #FBD4BE 100%);
  box-shadow: inset 0px -5px 16px 0px #DC834F;
  border-radius: 10px;
  border: 2px solid #FBD4BE;
}
.gray_btn {
  color: #fff;
  font-weight: 600;
  background: #AAAAAA;
  box-shadow: inset 0px -5px 16px 0px #6E6D6D;
  border-radius: 10px;
  border: 2px solid #CACACA;
}
.red_btn {
  color: #fff;
  font-weight: 600;
  background: #B67C62;
  box-shadow: inset 0px -5px 16px 0px #8C4A23;
  border-radius: 10px;
  border: 2px solid #aa7a5c;
}
</style>